<template>
	<view class="content">
		<view class="user dl">
			<dt>
				<image :src="avatarUrl ? avatarUrl : '../../static/img/user.svg'"></image>
			</dt>
			<dd>
				<h2 v-if="avatarUrl">{{nickname}}</h2>
				<h2 v-else @click="navigateto('./avatar')">授权微信昵称</h2>
				<span v-if="status == null" class="warning">游客</span>
				<span v-if="status == 0">申请中</span>
				<span v-if="status == 1" class="now">代理商</span>
				<span v-if="status == 2">已拒绝</span>
			</dd>
		</view>
		<view class="order">
			<h2>我的订单<span @click="navigateto('../order/order')">全部订单<icon class="icon-arrow"></icon></span></h2>
			<view class="list">
				<li @click="navigateto('../order/order?active=1')"><icon class="icon-reserve"></icon>已预定</li>
				<li @click="navigateto('../order/order?active=2')"><icon class="icon-refuse"></icon>已拒绝</li>
				<li @click="navigateto('../order/order?active=3')"><icon class="icon-complete"></icon>已完成</li>
				<!-- <li @click="navigateto('../order/after-sales')"><icon class="icon-after"></icon>售后服务</li> -->
			</view>
		</view>
		<view class="quick ls">
			<li @click="navigateto('../order/after-sales')">
				<icon class="icon-after"></icon><text>售后维修</text>
				<icon class="icon-arrow"></icon>
			</li>
		</view>
		<view class="quick">
			<li @click="navigateto('../my/agent')">
				<icon class="icon-agent"></icon><text>加盟代理</text>
				<icon class="icon-arrow"></icon>
			</li>
			<li @click="makePhoneCall()">
				<icon class="icon-gl-telephone"></icon><text>联系我们</text>
				<icon class="icon-arrow"></icon>
			</li>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				avatarUrl: '',
				nickname: '',
				status: '',
			}
		},
		onShow() {
			this.avatarUrl = uni.getStorageSync('avatarUrl')
			this.nickname = uni.getStorageSync('nickname')
			this.realName()
		},
		methods: {
			realName() {
				let _this = this;
				wx.request({
					url: 'https://www.norwamd.cn/apps/user/apply/isAgent',
					data: {},
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Authorization': uni.getStorageSync('token')
					},
					success(res) {
						// console.log(res)
						if(res.data.success === false) {
							_this.status = null
						} else {
							_this.status = res.data.data
						}
					}
				})
			},
			makePhoneCall() {
				wx.makePhoneCall({
					phoneNumber: '0551-65377493'
				})
			},
			navigateto(url) {
				wx.navigateTo({
					url: url
				})
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	.user {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background: #ededed;

		dt {
			overflow: hidden;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;

			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 100%;
			}
		}

		dd {
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;

			h2 {
				font-size: 36rpx;
				font-weight: bold;
			}

			span {
				width: 100rpx;
				font-size: 22rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				text-align: center;
				margin: 15rpx 0 0;
				background: #999;
				color: #fff;

				&.now {
					background: #dc261b;
				}
				&.warning {
					background: #e6a23c;
				}
			}
		}
	}

	.order {
		margin: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx 30rpx 0;

		h2 {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: bold;

			span {
				color: #999;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				font-weight: normal;

				icon {
					color: #999;
					font-size: 24rpx;
					display: flex;
				}
			}
		}

		.list {
			display: flex;
			padding: 50rpx 0;

			li {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 24rpx;
				color: #999;

				icon {
					color: #666;
					font-size: 60rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.quick {
		margin: 20rpx;
		background: #fff;
		padding: 10rpx 30rpx;
		border-radius: 16rpx;

		&.ls {
			padding: 5rpx 30rpx;
		}

		li {
			height: 92rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			border-bottom: 2rpx solid #e9e9e9;

			&:last-of-type {
				border-bottom: none;
			}

			text {
				flex: 1;
				margin: 0 24rpx;
			}

			icon {
				display: flex;
				font-size: 40rpx;
				color: #666;

				&:last-of-type {
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
</style>